<template>
  <!-- 预览/推送 -->
  <h-modal class="event-modal" v-model="show" title="预览/推送上屏" @submit="show = false" hideFooter>
    <a-button type="primary" @click="pushReviewBath">批量推送</a-button>
    <br>
    <br>
    <a-form-model :model="form" size="large">
      <a-row :gutter="0">
        <a-col :span="24">
          <!-- <h-tooltip class="cancel-btn" title="这个接口还没好吧" /> -->
          <a-form-model-item label="">
            <h-table
              ref="htable"
              @init="getList"
              :config="config"
              :showHeadBgNone="false"
              :zebraStripes="false"
              showRowSelection
              @select="select">
              <span slot="titles" slot-scope="{text}">
                <a-popover placement="topLeft">
                  <template slot="content">
                    <div style="max-width: 300px">
                      {{ text }}
                    </div>
                  </template>
                  {{ text }}
                </a-popover>
              </span>
              <span slot="content" slot-scope="{text}">
                <a-popover placement="topLeft">
                  <template slot="content">
                    <div style="max-width: 400px">
                      {{ text }}
                    </div>
                  </template>
                  {{ text }}
                </a-popover>
              </span>
              <span slot="pushStatus" slot-scope="{text}">
                <a-tag v-if="text == 0">待推送</a-tag>
                <a-tag color="green" v-else-if="text == 1">已推送</a-tag>
              </span>
              <span slot="action" slot-scope="{record}">
                <a @click="pushReviewBath(record)">推送</a>
              </span>
            </h-table>
          </a-form-model-item>

        </a-col>
      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { getReviewBathList, pushReviewBath } from '@/api/serve';
export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    id: {
      default: '',
      type: String
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          this.getList();
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      ids: [],
      show: false,
      form: {},
      config: {
        rowKey: 'id',
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '批次号',
            dataIndex: 'id'
          },
          {
            align: 'center',
            title: '第三方公司',
            dataIndex: 'createBy'
            // scopedSlots: { customRender: 'titles' },
            // ellipsis: true,
            // width: 200
          },
          {
            align: 'center',
            title: '数据数量',
            dataIndex: 'num'
            // scopedSlots: { customRender: 'content' },
            // width: 300,
            // ellipsis: true
          },
          {
            align: 'center',
            title: '推送时间',
            dataIndex: 'createTime'
          },
          // {
          //   align: 'center',
          //   title: '推送状态',
          //   dataIndex: 'pushStatus',
          //   scopedSlots: { customRender: 'pushStatus' }
          // },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: false
      }
    };
  },
  methods: {
    getList(params) {
      getReviewBathList({
        eventId: this.id
      }).then(res => {
        this.config.dataSource = res.data;
      });
    },
    select({ selectedRowKeys }) {
      // console.log(e);
      this.ids = selectedRowKeys;
    },
    pushReviewBath({ id }) {
      if (!this.ids.length && !id) {
        this.$message.error('请先选择！');
        return;
      }
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: '确认要推送吗？',
        onOk() {
          const idList = id ? [id] : this.ids;
          pushReviewBath({
            idList
          }).then(res => {
            that.$message.success(res.msg);
            that.ids = [];
            that.$refs.htable.cancel();
            that.getList();
          });
        }
      });
    }
  }
};
</script>

<style>

</style>
